<template>
  <div>
    <!--        搜索-->
    <div style="padding-bottom: 20px">
      <el-input prefix-icon="el-icon-search"
                style="width: 50%;border-color: #409EFF;border-style: solid;border-radius: 4px"
      v-model="input"
      @focus="getsearchinfo"
      @blur="searchVis=false"
      @keydown.enter.native="search(input)"></el-input>
      <div v-if="searchVis"
          style="width: 40%;background-color:white;position: absolute;left: 30%;z-index: 3" >
        <el-row>
          <el-col :span="12">
            <p>最近搜索</p>
            <template v-for="i in recentsearch">
              <p @click="search(i)">{{i}}</p>
            </template>
          </el-col>
          <el-col :span="12">
            <p>热门搜索</p>
            <template v-for="i in hotsearch">
              <p @click="search(i)">{{i}}</p>
            </template>
          </el-col>
        </el-row>
      </div>
      <el-button icon="el-icon-search" type="primary" @click="search"></el-button>
    </div>
    <!--        走马灯-->
    <div style="width: 70%;margin: auto">
      <el-carousel height="200px" type="card">
        <el-carousel-item v-for="i in imgs" :key="i">
          <el-image :src="i" fit="contain"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--        分类-->
    <div style="border-style: solid;border-color: white;border-width: 2px 0 0 0;">
      <el-row type="flex">
        <el-col :span="20">
          <el-tabs tab-position="left">
            <el-tab-pane label="行业">
              <el-row >
                <el-col  v-for="i in 19" :key="i" :span="6" style="padding-top: 10px">算法</el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="行业">java</el-tab-pane>
            <el-tab-pane label="行业">java</el-tab-pane>
            <el-tab-pane label="行业">java</el-tab-pane>
            <el-tab-pane label="行业">java</el-tab-pane>
            <el-tab-pane label="行业">java</el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="4" style="background-color: white">
          <el-row type="flex" justify="start">
            <el-col :span="6">
              <el-avatar  :src="user.imgUrl"></el-avatar>
            </el-col>
            <el-col :span="8">
              <h6 style="font-size: 16px;line-height: 22px;margin: 0px">Hi,{{user.name}}</h6>
              <p style="font-size: 12px;line-height: 17px;margin: 2px">欢迎回来</p>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col>
              <div @click="toDeliver">
                <p class="card-count">{{deliverNum}}</p>
                <p style="font-size: 12px">我的投递</p>
              </div>
            </el-col>
            <el-col>
              <p class="card-count">0</p>
              <p style="font-size: 12px">企业看过</p>
            </el-col>
            <el-col>
              <p class="card-count">0</p>
              <p style="font-size: 12px">企业反馈</p>
            </el-col>
          </el-row>
          <el-button type="primary">个人中心</el-button>
          <el-row>

          </el-row>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import {requests} from "@/utils/request";
import {getuserinfo} from "@/mixin";
import search from "@/utils/api/search";

export default {
  name: "Home",
  data(){
    return{
      input:'',
      recentsearch:[],
      hotsearch:[],
      imgs:[
        "https://xycy-file.zhaopin.com/xyactivity/2022/9/2/15/26/2cd7ee4b21e74a418f195cc291fe830f_39.jpg?x-oss-process=image/resize,m_lfit,h_410,w_700",
          "https://xycy-file.zhaopin.com/xyactivity/2022/8/30/9/57/5757c347bd1e4b75b3a69df1a3a2af1d_1.jpg?x-oss-process=image/resize,m_lfit,h_410,w_700",
          "https://xycy-file.zhaopin.com/xyactivity/2022/8/17/15/59/437f3e37f5a24807be2705ba052b9cc5_1.jpg",
          "https://xycy-file.zhaopin.com/xyactivity/2022/8/22/11/18/7db5565f270a41a18532addabbd7e203_03.jpg",
      ],
      deliverNum:0,
      searchVis:false
    }
  },
  mounted() {
    this.getDeliverNum()
  },
  methods:{
    getDeliverNum(){
      requests.get("/user/deliveryNum").then(res=>{
        this.deliverNum=res.data.data
      })
    },
    toDeliver(){
      this.$router.push('delivery')
    },
    search(input){
      search.search(this.input)
      this.$router.push({
        path:'/index/jobs',
        query:{
          input:input
        }
      })
      },
    getsearchinfo(){
      search.getRecentSearch().then(res=>{
        this.recentsearch=res.data.data
      })
      search.getHotSearch().then(res=>{
        this.hotsearch=res.data.data
      })
      this.searchVis=true
    }
    },
  mixins:[getuserinfo]
}
</script>

<style scoped>
.user{
  float: right;
  padding-right: 20px;
}
.useritem{
  margin-right: 30px;
}
.card-count{
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: #5b7be9;
  margin-bottom: 0px;
}
.el-collapse__item{
  width:400px ;
}
</style>